<template>
	<view class="pad-30">
		<view class="coupon-box" v-for="(item,inx) in exchanges">
			<image src="/static/image/coupon3.png" mode=""></image>
			<view class="coupon-view betweenX centerY">
				<view>
					<view class="title font-32">{{item.title}}</view>
					<view class="font-24 color-theme mar-top-5">{{item.cost_points}}积分</view>
					<view class="font-24 color-646464 mar-top-5">数量： {{item.sold_cnt}}/{{item.stock}}</view>
				</view>
				<view class="coupon-button centerXY">领取</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { activityDetail } from '@/api/index.js';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';

	const exchanges = ref([]);
	let props = ref({});


	const getActivityDetail = async (activityId) => {
		// 获取详情
		let { data } = await activityDetail({ activity_id: activityId })
		exchanges.value = data.exchanges;
	}

	onLoad((option) => {
		props.value = option;
		getActivityDetail(option.activity_id);
	})
</script>

<style scoped lang="scss">
	.coupon-box {
		width: 100%;
		height: 137rpx;
		position: relative;
		margin-bottom: 24rpx;

		image {
			display: block;
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
		}

		.coupon-button {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #FFF5E1 0%, #FED37D 100%);
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			color: #FA2D1F;
			font-size: 24rpx;
			flex-shrink: 0;
			margin-left: 10rpx;
		}

		.title {
			color: #FA2D1F;
		}

		.coupon-view {
			position: absolute;
			z-index: 2;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			height: 137rpx;
			width: 100%;
		}
	}
</style>